// 创建轮播图类
function Carousel($tagClass) {
  // this.tagClass  获取当前轮播图的父级元素
  this.tagClass = document.querySelector($tagClass);
  this.li_list = this.tagClass.getElementsByTagName("li");
  this.ul = this.tagClass.querySelector(".img_box>ul");
  this.arrow_left = this.tagClass.querySelector(".arrow_left");
  this.arrow_right = this.tagClass.querySelector(".arrow_right");
  this.dot_box = this.tagClass.querySelector(".dot_box");
  this.dots = this.tagClass.querySelectorAll(".dot_box>span");
  // 初始值(用于控制轮播图)
  this.index = 1;
  // 保存上一次操作的值
  this.lastIndex = 1;
  // 默认调用初始化
  // this.init()
};


// 轮播图初始化
Carousel.prototype.init = function () {
  let _this = this;
  // 克隆第一张和最后一张做无缝图片
  // 1. 克隆最后一张插入到第一张图片前面
  this.ul.insertBefore(this.ul.lastElementChild.cloneNode(true), this.ul.firstElementChild);
  // 2. 克隆第二张追加到最后一张的后面
  this.ul.appendChild(this.ul.children[1].cloneNode(true));

  // 将真正的第一张图恢复到可视区域
  this.ul.style.transform = `translateX(-${this.index}00%)`;
  // 设置延时定时器 (克隆完毕之后, 300ms恢复过渡效果)
  // setTimeout(() => {
  //   this.ul.style.transition = "0.2s ease-in-out";
  // }, 300);
  setTimeout(function () {
    // setTimeout 属于window的对象, 他this默认指向window
    _this.ul.style.transition = "0.2s ease-in-out";
  }, 300);

  // 执行左右箭头功能
  this.arrow_left.addEventListener("click", function () { _this.arrowLeft() });
  this.arrow_right.addEventListener("click", function () { _this.arrowRight() });
  // 执行小圆点功能
  this.dotsClick();
};

// 左右箭头零界点封装函数
Carousel.prototype.limitFn = function ($limitIndex, $setIndex) {
  if (this.index === $limitIndex) {
    this.index = $setIndex;
    this.ul.addEventListener("transitionend", () => {
      this.ul.style.transition = "none";
      this.ul.style.transform = `translateX(-${this.index}00%)`;
      window.getComputedStyle(this.ul, "style").transition;
      this.ul.style.transition = "0.2s ease-in-out";
    }, {
      once: true
    });
  };
  this.dotColor();
};

// 左边箭头功能
Carousel.prototype.arrowLeft = function () {
  // this 指向的是实例对象
  this.ul.style.transform = `translateX(-${--this.index}00%)`;
  this.limitFn(0, this.li_list.length - 2);
};

// 右边箭头功能
Carousel.prototype.arrowRight = function () {
  this.ul.style.transform = `translateX(-${++this.index}00%)`;
  this.limitFn(this.li_list.length - 1, 1);
};



// 给小圆点绑定点击事件 (事件代理)
Carousel.prototype.dotsClick = function () {
  // 给小圆点绑定点击事件 (事件代理)
  this.dot_box.addEventListener("click", (e) => {
    // 检测当前事件对象是否包含dot类名
    if (e.target.classList.contains("dot")) {
      // 获取自定义的属性data-index, 这个值就是当前ul所要平移的值
      let dataIndex = e.target.dataset.index;
      // 当前操作的值赋值给index初始值
      this.index = dataIndex;
      this.ul.style.transform = `translateX(-${dataIndex}00%)`;
      // 切换小圆点颜色
      this.dotColor();
    };
  });
};

// 切换小圆点颜色
Carousel.prototype.dotColor = function () {
    // 清除上一次操作的样式
  this.dots[this.lastIndex - 1].classList.remove("dotActive")
  // index 就是当前操作的下标
  this.dots[this.index - 1].classList.add("dotActive");
  // 将当前操作的index赋值lastIndex
  this.lastIndex = this.index;
};



// 创建一个子类(功能新增自动轮播)
// 继承父类(Carousel)
function Carousel2($tag) {
  // 构造函数继承
  Carousel.apply(this, [$tag]);
  // 直接调用(默认开启)
  this.autoPlay();
};

// 继承父类的原型对象方法和属性
// 目的是为了继承父类原型对象的方法和属性
// 创建空对象作为中介
function Obj() { };
Obj.prototype = Carousel.prototype;

Carousel2.prototype = new Obj();

// 自动播放
Carousel2.prototype.autoPlay = function () {
  // 使用定时器, 自动执行向右移动功能
  let time = null;
  // 一秒执行一次
  time = setInterval(() => {
    this.arrowRight();
  }, 1000);
  // 检测是否需要停止
  // 鼠标移入之后停止自动轮播
  this.tagClass.addEventListener("mouseenter", () => {
    clearInterval(time);
  });
  // 鼠标移开之后再次执行自动轮播
  this.tagClass.addEventListener("mouseleave", () => {
    time = setInterval(() => {
      this.arrowRight();
    }, 1000);
  });
};